<!DOCTYPE html>
<html lang="en">

<head>
       <title>丰收保险经纪网</title>   	
   <meta name="keywords" content="丰收，保险经纪，保险经纪网，丰收经纪保险，丰收经纪网，保险超市，买保险  " />
	<meta name="description" content="丰收保险经纪网是康达尔设立的保险电子商务网站，提供国内外80余家保险公司的保险产品，通过丰收保险经纪可在线比价，方便快捷的进行保险购买。丰收保险经纪为客户免费提供专业、优质的协助理赔服务，为投保人争取最大利益。丰收保险经纪涵盖保险及产品在线购买，保险产品优惠，保险推荐，保险预约，积分兑换礼品，报案理赔等内容 ，就上丰收保险经纪！"/>  
<link rel="shortcut icon" href="http://test.51dfs.cn/templets/1/fengshou//m/images/logo.ico" type="x-icon">  
   <meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
		<meta name="apple-touch-fullscreen" content="yes">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="full-screen" content="yes">
		<meta name="browsermode" content="application">
		<meta name="x5-orientation" content="portrait">
		<meta name="x5-fullscreen" content="true">
		<meta name="x5-page-mode" content="app">
		<link rel="stylesheet" href="/templets/1/fengshou//m/css/base.css">
		<link rel="stylesheet" href="/templets/1/fengshou//m/css/main.css">
		 <link rel="stylesheet" href="/templets/1/fengshou//m/mint/lib/style.css">
		  <script src="/templets/1/fengshou//m/js/zepto.min.js"></script>
    	<script src="/templets/1/fengshou//m/js/vue.min.js"></script>
    	<script src="/templets/1/fengshou//m/mint/lib/index.js"></script>
</head>

<body>
    <div id="appCtrl" v-locak>
        <mt-header title="保险列表">
            <a href="javascript:;" @click="history.go(-1)" slot="left">
                <mt-button icon="back"></mt-button>
            </a>
        </mt-header>
        <mt-tab 
        v-model="selected"
        activeColor="#A17E41"
        > 
          <mt-tab-item v-for="(item, index) in tabsList" :key="item.id" @click.native="tabChange(item.id, index)">
            {{item.label}}
          </mt-tab-item>
        </mt-tab>
        <div class="list-filter">
            <div class="bd">
                <ul>
                    <li @click="sortVisible=true" :class="{on:currentSortName}">{{currentSortName||'综合排序'}}<i></i></li>
                    <li @click="ageVisible=true" :class="{on:currentAgeName}">{{currentAgeName||'适用人群'}}<i></i></li>
                    <li @click="brandVisible=true" :class="{on:currentBrandName}">{{currentBrandName||'保险公司'}}<i></i></li>
                </ul>
            </div>
        </div>

        <div class="products-list"
        v-infinite-scroll="fetchData"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10">
            <a :href="el.url" v-for="el in dataList">
                <div class="content">
                    <div class="img" :style="'background-image: url('+el.img+')'"></div>
                    <div class="desc">
                        <h3>{{el.title}}</h3>
                        <p class="cGray">{{el.title}}</p>
                        <p class="cGray">{{el.brand}}  </p>
                        <p class="price cGray"><span class="cGold">{{el.price}}</span> 元/年</p>
                    </div>
                </div>
            </a>
        </div>
        <div class="spinner-wrapper cGray">
            <mt-spinner v-show="loading===true" type="fading-circle"></mt-spinner>
            <p v-show="loading===-1">没有更多了~</p>
            <div class="empty" v-show="loading===-2">
                <p class="cGray">暂无数据</p>
            </div>
        </div>

        <mt-popup
          v-model="sortVisible"
          position="bottom" style="width:100%">
          <mt-picker 
            title="请选排序方式"
            :slots="sortSlots" 
            :show-toolbar="true"
            :ok="sortOk"
            @change="sortChange">
          </mt-picker>
        </mt-popup>

        <mt-popup
          v-model="ageVisible"
          position="bottom" style="width:100%">
          <mt-picker 
            title="请选适用人群"
            :slots="ageSlots" 
            :show-toolbar="true"
            :ok="ageOk"
            @change="sortChange">
          </mt-picker>
        </mt-popup>

        <mt-popup
          v-model="brandVisible"
          position="bottom" style="width:100%">
          <mt-picker 
            title="请选择保险品牌"
            :slots="brandSlots" 
            :show-toolbar="true"
            :ok="brandOk"
            @change="sortChange">
          </mt-picker>
        </mt-popup>

    </div>
    <script>
   	debugger;
    var vm = new Vue({
        el: '#appCtrl',

        data: function() {
            return {
                sortVisible:false,
                ageVisible:false,
                brandVisible:false,
                currentSortName:'',
                currentAgeName:'',
                currentBrandName:'',

                loading:false,

                dataList:[],

                pageParams:{
                    tabId:'',
                    sortId:'',
                    ageId:'',
                    pageNo:0,
                    pageSize:10
                },

                selected:0,
			
                tabsList: ${insTypeList?default('[]')},

                sortSlots:[{
                  flex: 1,
                  values: [{
                    key:2001,
                    label:'综合排序'
                  },{
                    key:2002,
                    label:'价格升序'
                  },{
                    key:2003,
                    label:'最新上架'
                  },{
                    key:2004,
                    label:'热门'
                  }]
                }],

                ageSlots:[{
                  flex: 1,
                  values: [
                  <#list peoList?default(0) as peo>  
                   {
                    key:${peo.pvId},
                   	label:'${peo.propertyValue}'
                   }, 
          		  </#list>  
                  ]
                }],

                brandSlots:[{
                  flex: 1,
                 values: [
                  <#list companyList?default(0) as company>  
                   {
                    key:${company.companyId},
                   	label:'${company.companyName}'
                   }, 
          		  </#list>   
                ]
                }],
            }
        },

        methods: {
            tabChange: function(id, index) {
                this.pageParams.pageNo = 0;
                this.currentSortName = '';
                this.currentAgeName = '';
                this.currentBrandName = '';
                this.dataList = [];
                this.fetchData();
            },

            sortChange: function(val){},

            sortOk: function(val){
                val = val[0];
                this.currentSortName = val.label;
                this.sortVisible=false;
                this.pageParams.pageNo = 0;
                this.dataList = [];
                this.fetchData();
            },

            ageOk: function(val){
                val = val[0];
                this.currentAgeName = val.label;
                this.ageVisible=false;
                this.pageParams.pageNo = 0;
                this.dataList = [];
                this.fetchData();
            },

            brandOk: function(val){
                val = val[0];
                this.currentBrandName = val.label;
                this.brandVisible=false;
                this.pageParams.pageNo = 0;
                this.dataList = [];
                this.fetchData();
            },

            fetchData: function(){
                this.pageParams.pageNo++
                console.log('请求参数：')
                console.log(this.pageParams)
                this.loading = true;
                // $.ajax({
                //     url:'http://www.baidu.com',
                //     dataType:'json',
                //     data: this.pageParams,
                //     success: function(res){
                //     模拟异步数据
                    setTimeout(function(){
                        var res = [
                        {
                            img:'images/products-list.jpg',
                            title:'中老年骨折意外险',
                            keywords:'50 - 80岁 /  老年人定制 / 骨折津贴',
                            brand:'中国平安',
                            sell:45465,
                            price:100,
                            url:'http://www.baidu.com?id=23423421'
                        },
                        
                        ];

                        vm.dataList = vm.dataList.concat(res);
                        if(res.length>=vm.pageParams.pageSize){
                            vm.loading = false;
                        }else if(res.length==0&&vm.pageParams.pageNo==1){
                            vm.loading = -2;//无数据
                        }else{
                            vm.loading = -1;//没有更多了
                        }
                },3000)
                //     }
                // });
            }
        },

        mounted: function(){
            // this.currentSortName = this.sortSlots[0].values[0].label;
        }
    })
    </script>
</body>

</html>